<!DOCTYPE html >
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>订单信息</title>

    <link rel="stylesheet" href="/css/font.css">
    <link rel="stylesheet" href="/css/xadmin.css">
    <link rel="stylesheet" href="../css/indexStyle.css">

    <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
    <!-- Bootstrap4 -->
    <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
    <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
    <script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<style>
    a {
        text-decoration: none;
    }

    .down {
        width: 100%;
        height: 90%;
        display: flex;
        flex-direction: row;
        background-color: #f0f3ef;
    }

    .downLeft {
        width: 11.8%;
        height: 500px;
        margin-left: 180px;
        margin-top: 130px;
        background-color: white;
        display: flex;
        flex-direction: column;
    }

    .downRU {
        width: 136%;
        height: 11%;
        margin-left: -180px;
        margin-top: 30px;
        background-color: white;
    }

    .downRD {
        width: 110%;
        height: 500px;
        margin-left: 30px;
        margin-top: 30px;
        background-color: white;
    }

    .downAddress {
        font-size: 15px;
        color: rgba(0, 0, 0, 0.7);
        font-family: 楷体;
        margin-top: 25px;
        margin-left: 30px;
    }

    .downPer {
        font-size: 17px;
        color: black;
        font-family: 楷体;
        font-weight: bolder;
        margin-top: 25px;
        margin-left: 30px;
    }

    .all-1 {
        font-family: 微软雅黑;
        font-weight: bolder;
        margin-left: 14px;
    }

    .aLL {
        display: flex;
        flex-direction: row;
        width: 720px;
        /*height: 100px;*/
        margin-left: 13px;
        border-radius: 5px;
        border-top: 1px solid rgba(131, 131, 131, 0.31);
        border-bottom: 1px solid rgba(131, 131, 131, 0.31);
    }

    .all-3 {
        width: 140px;
        /*height: 99px;*/
        /*margin-top: 5px;*/
        /*margin-left: 7px;*/
        border-radius: 5px;
        border-left: 1px solid rgba(131, 131, 131, 0.31);
        border-right: 1px solid rgba(131, 131, 131, 0.31);

    }

    .all-3 > img {
        width: 70px;
        height: 70px;
        margin-top: 12px;
        margin-left: 43px;
    }

    .all-3 > input {
        font-size: 13px;
        width: 80px;
        height: 25px;
        background-color: white;
        margin-top: 5px;
        margin-left: 40px;
        border: 1px solid rgba(131, 131, 131, 0.31);
        border-radius: 10px;
    }

    .all-2 {
        margin-top: 10px;
        margin-left: 10px;
        width: 290px;
        /*height: 100px;*/
    }

    .all-2 > input {
        width: 150px;
        height: 20px;
        margin-top: 3px;
        margin-left: 30px;
    }
</style>
<body>
<!--    导航栏-->
<div th:replace="~{header :: header}"></div>

<div style="display: flex; flex-direction: column; margin-left: 8px; margin-top: 8px;">
    <div class="down">
        <div class="downLeft">
            <div style="margin-top: 10px; margin-left: 35px;">
                <p class="downPer">信&nbsp息</p>
            </div>
            <div style="margin-top: 8px; margin-left: 25px;">
                <a class="downAddress" style="font-color: rgba(114,114,114,0.49); font-weight: bolder"
                   th:href="@{/user/getOrder}">订单信息</a>
            </div>
            <div style="margin-top: 8px; margin-left: 25px;">
                <a class="downAddress" th:href="@{/user/getAddresses}">收货地址</a>
            </div>
            <div style="margin-top: 8px; margin-left: 25px;">
                <a class="downAddress" th:href="@{/toUserDetail}">个人信息</a>
            </div>
        </div>
        <!--        &lt;!&ndash; 页面切换 &ndash;&gt;-->
        <div style="display: flex; flex-direction: column">
            <div class="downRU">
                <p class="downAddress">订单信息</p>
            </div>
            <div class="downRD">
                <ul id="myTab" class="nav nav-tabs" style="margin-top: 20px; margin-left: 30px">
                    <li class="active">
                        <a class="all-1" id="allOrder" data-toggle="tab">全部订单</a>
                    </li>
                    <li>
                        <a class="all-1" id="pay" data-toggle="tab">待支付</a>
                    </li>
                    <li>
                        <a class="all-1" id="cancel" data-toggle="tab">已取消</a>
                    </li>
                    <li>
                        <a class="all-1" id="settle" data-toggle="tab">待揽收</a>
                    </li>
                    <li>
                        <a class="all-1" id="send" data-toggle="tab">待发货</a>
                    </li>
                    <li>
                        <a class="all-1" id="receipt" data-toggle="tab">代签收</a>
                    </li>
                    <li>
                        <a class="all-1" id="evaluate" data-toggle="tab">待评价</a>
                    </li>
                    <li>
                        <a class="all-1" id="evaluateOk" data-toggle="tab">已评价</a>
                    </li>
                </ul>
                <div style="width: 100%; height: 5px; margin-top: 15px;"></div>
                <div id="myTabContent" class="tab-content" style="margin-left: 30px;">
                    <div class="tab-pane fade in active" id="all" th:fragment="ordersPageBox">
                        <div class="aLL" th:each="orders:${list}">
                            <div class="all-3">
                                <div style="width: 140px; margin-left: 15px;height: 99px"
                                     th:each="detail:${orders.orderDetailList}">
                                    <img style="border-radius: 5px; margin-left: -15px;width: 100%; height: 99px"
                                         th:src="${detail.goods.goodsImage}"/>
                                </div>
                            </div>
                            <div class="all-2">
                                <div th:each="detail:${orders.orderDetailList}">
                                    <span style="font-size: 15px;color: #bd2c00"
                                          th:text="${detail.goods.goodsName}"></span><br>
                                    价格：<span style="color: #bd2c00" th:text="${detail.goodsPrice}"></span><br>
                                    数量：<span style="color: #bd2c00" th:text="${detail.goodsNumber}"></span><br><br>
                                </div>
                                总计：<span style="color: #bd2c00" th:text="${orders.sum}"></span>
                            </div>
                            <div class="all-2">
                                收货人姓名：<span style="color: dodgerblue"
                                            th:text="${orders.userAddress.realName}"></span><br>
                                联&nbsp;系&nbsp;方&nbsp;式&nbsp;：<span style="color: dodgerblue"
                                                                   th:text="${orders.userAddress.telephone}"></span><br>
                                收&nbsp;货&nbsp;地&nbsp;址&nbsp;：<span style="color: dodgerblue"
                                                                   th:text="${orders.userAddress.address}"></span><br>

                            </div>
                            <div class="all-3">
                                <div style="height: 22px;width: 70% ; margin-top:5px;  margin-left: 10px; background-color: #00F7DE;"
                                     th:if="${orders.orderState eq '待揽件' || orders.orderState eq '代发货' || orders.orderState eq '待签收'} ">
                                    <a style="margin-left: 10px" th:href="@{/user/modById(orderId=${orders.orderId})}">确认收货</a><br>
                                </div>
                                <div style="height: 22px;width: 70% ; margin-top:5px;  margin-left: 10px; background-color: #00F7DE; "
                                      th:if="${orders.orderState eq '待支付' || orders.orderState eq '待揽件' || orders.orderState eq '待发货'}">
                                    <a style="margin-left: 10px"
                                       th:href="@{/user/cancel(orderId=${orders.orderId})}">取消订单</a><br>
                                </div>
                                <div style="height: 22px;width: 70% ; margin-top:5px;  margin-left: 10px; background-color: #00F7DE; "
                                     th:if="${orders.orderState eq '待评价' || orders.orderState eq '评价完成' ||orders.orderState eq '已取消'}">
                                    <a style="margin-left: 10px"
                                       th:href="@{/user/deleteOrder(orderId=${orders.orderId})}">删除订单</a><br>
                                </div>
                                <div style="height: 22px;width: 70% ; margin-top:5px;  margin-left: 10px; background-color: #00F7DE;"
                                     th:if="${orders.orderState eq '待支付'} ">
                                    <a style="margin-left: 10px" th:href="@{/pay/toPay(ordersId=${orders.orderId})}">前往支付</a><br>
                                </div>
                                <div style="height: 22px;width: 70% ; margin-top:5px;  margin-left: 10px; background-color: #00F7DE;"
                                     th:if="${orders.orderState eq '待评价'}"
                                th:each="detail:${orders.orderDetailList}">
                                    <a style="margin-left: 10px" th:href="@{/goods/goodsDetail(goodsId=${detail.goods.goodsId})}">前往评价</a><br>
                                </div>
                                <div style=" width: 100%;height:30%;margin-top: 5px ">
                                    <span style="font-size: 15px; color:#eb7350;margin-left: 25px"
                                          th:text="${orders.orderState}"></span><br>
                                    <span style="font-size: 15px; color:#eb7350;margin-left: 25px"
                                          th:text="${orders.orderCheck}"></span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
</body>
<script>
    $('#allOrder').click(function () {
        let url = '/user/getAllOrder';
        $.ajax({
            url: url,
            type: 'POST',
            success: function (data) {
                $("#all").html(data);
            }
        })
    })

    $('#pay').click(function () {
        let url = '/user/getOrderBy?orderState=待支付';
        $.ajax({
            url: url,
            type: 'POST',
            success: function (data) {
                $("#all").html(data);
            }
        })
    })

    $('#cancel').click(function () {
        let url = '/user/getOrderBy?orderState=已取消';
        $.ajax({
            url: url,
            type: 'POST',
            success: function (data) {
                $("#all").html(data);
            }
        })
    })


    $('#settle').click(function () {
        let url = '/user/getOrderBy?orderState=待揽件';
        $.ajax({
            url: url,
            type: 'POST',
            success: function (data) {
                $("#all").html(data);
            }
        })
    })
    $('#send').click(function () {
        let url = '/user/getOrderBy?orderState=待发货';
        $.ajax({
            url: url,
            type: 'POST',
            success: function (data) {
                $("#all").html(data);
            }
        })
    })
    $('#receipt').click(function () {
        let url = '/user/getOrderBy?orderState=待签收';
        $.ajax({
            url: url,
            type: 'POST',
            success: function (data) {
                $("#all").html(data);
            }
        })
    })
    $('#evaluate').click(function () {
        let url = '/user/getOrderBy?orderState=待评价';
        $.ajax({
            url: url,
            type: 'POST',
            success: function (data) {
                $("#all").html(data);
            }
        })
    })
    $('#evaluateOk').click(function () {
        let url = '/user/getOrderBy?orderState=已评价';
        $.ajax({
            url: url,
            type: 'POST',
            success: function (data) {
                $("#all").html(data);
            }
        })
    })
</script>
</html>
